<template>
  <!--虚拟人的时间线-->
  <div class="vtuber-com" :style="style">
    <line-item class="vtuber-line" :timeline-item="timelineItem" @updateStyle="handleUpdateStyle">
      <template #0>
        <div class="vtuber-content content-preview show-padding">
          <div class="content-img">
            <img :src="vtuberSrc" alt="虚拟人" />
          </div>
          <span class="content-text">{{ vtuberName }}</span>
        </div>
      </template>
    </line-item>
    <component
      :is="item.name"
      v-for="(item, index) in timelineItem.childrenElList"
      :key="item.mark"
      :class="timelineItem.iconDisable.contract !== 1 && 'line-hidden'"
      class="vtuber-child-line"
      :timeline-item="item"
    ></component>
  </div>
</template>

<script>
import LineItem from '../lineItem.vue';
import textDrive from '@veditor/components/timeLine/components/timeLineCom/textDrive.vue';
import audioDrive from '@veditor/components/timeLine/components/timeLineCom/audioDrive.vue';
import action from '@veditor/components/timeLine/components/timeLineCom/action.vue';
import emotion from '@veditor/components/timeLine/components/timeLineCom/emotion.vue';
import doubleDrive from '@veditor/components/timeLine/components/timeLineCom/doubleDrive.vue';
export default {
  name: 'Vtuber',
  components: {
    LineItem,
    textDrive,
    audioDrive,
    action,
    emotion,
    doubleDrive,
  },
  props: {
    timelineItem: {
      required: true,
      type: Object,
    },
  },
  data() {
    return {
      lineStyle: {
        width: 0,
        left: 0,
      },
      borderWidth: 4, // 边框占的宽度
    };
  },
  computed: {
    vtuberName() {
      return this.timelineItem.vtuberName;
    },
    vtuberSrc() {
      return this.timelineItem.vtuberSrc;
    },
    style() {
      return {
        width: `${this.lineStyle.width + this.borderWidth}px`,
        left: `${this.lineStyle.left}px`,
      };
    },
  },
  methods: {
    handleUpdateStyle(style) {
      Object.assign(this.lineStyle, style);
    },
  },
};
</script>
<style lang="stylus">
.vtuber-com
  display inline-block
  position relative
  .line-hidden
    position absolute
    opacity 0
    z-index -1
  .vtuber-line
    padding 0 20px
    .line-item
      background #1f3657
      color #8baad7
</style>
